<template>
  <view class="examCard" :class="{ examCardCoverstion: isFromConversation }">
    <view v-if="isCanSelect" class="examCard-top" @tap="examSelectAction">
      <image
        v-if="data.isSelected"
        class="examCard-top-select"
        src="@/pagesA/static/images/exam/exam_select.png"
      >
      </image>
      <image
        v-else
        class="examCard-top-select"
        src="@/pagesA/static/images/exam/exam_unselect.png"
      ></image>
      <view class="examCard-top-leftTitle">{{ data.ptypeTitle }}</view>
      <!-- <view class="examCard-top-rigthTitle">{{ examSimilarity }}</view> -->
    </view>
    <view
      v-else
      class="examCard-normalTop"
      :class="{ 'examCard-normalTopConversation': isFromConversation }"
    >
      <view class="examCard-normalTop-title">{{ data.ptypeTitle }}</view>
      <view class="examCard-normalTop-subTitle">{{ examForm }}</view>
    </view>
    <view class="examCard-exam textWrap">
      <view class="examCard-exam-topic">
        <ExamHeaderSection title="题目" />
        <up-parse class="examCard-exam-topic-content" :content="data.stem">
        </up-parse>
        <view v-if="data.stemSrc" class="examCardExamAudio">
          <KKAudio
            class="examCardExamAudio-audio"
            v-if="data.stemSrc"
            :data="loadAudioPlayData(data.stemSrc)"
          />
        </view>

        <view
          class="examCard-exam-topic-select"
          v-for="(selectvValue, index) in examMetas(data.metas)"
          :key="index"
        >
          <view
            v-if="showExamMetasItemKey(selectvValue)"
            class="examCard-exam-topic-select-row"
          >
            <up-parse
              class="answerSelect"
              :content="showExamMetasItemKey(selectvValue)"
            >
            </up-parse>
            <up-parse
              class="answerContent"
              :content="showExamMetasItemValue(selectvValue)"
            >
            </up-parse>
          </view>
          <view v-else class="examCard-exam-topic-select-row">
            <up-parse
              class="answerContent"
              :content="showExamMetasItemOnlyValue(selectvValue)"
            >
            </up-parse>
          </view>
          <view
            v-if="showExamMetasItemAudioSrc(selectvValue)"
            class="examCardExamAudio"
          >
            <KKAudio
              class="examCardExamAudio-audio"
              v-if="data.analysisSrc"
              :data="loadAudioPlayData(showExamMetasItemAudioSrc(selectvValue))"
            />
          </view>
        </view>
        <!-- data.metas -->

        <view class="examCard-exam-topic-answer" v-if="examAnswer(data.answer)">
          <view class="examCard-exam-topic-answer-daan">答案：</view>
          <up-parse
            class="examCard-exam-topic-answer-content"
            :content="examAnswer(data.answer)"
          ></up-parse>
        </view>

        <!-- 材料题子题目 -->
        <view
          class="examCard-exam-topic-subExam"
          v-if="data.childQuestions && data.childQuestions.length > 0"
          v-for="(subExam, index) in data.childQuestions"
          :key="index"
        >
          <up-parse
            class="subExamStem"
            :content="subExamStemInfo(index + 1, subExam.stem)"
          >
          </up-parse>
          <view v-if="subExam.stemSrc" class="examCardExamAudio">
            <KKAudio
              class="examCardExamAudio-audio"
              v-if="subExam.stemSrc"
              :data="loadAudioPlayData(subExam.stemSrc)"
            />
          </view>
          <!-- 选项 -->
          <view
            class="examCard-exam-topic-subExam-select"
            v-for="(selectvValue, index) in examMetas(subExam.metas)"
            :key="index"
          >
            <view
              v-if="showExamMetasItemKey(selectvValue)"
              class="examCard-exam-topic-subExam-select-row"
            >
              <up-parse
                class="answerSelect"
                :content="showExamMetasItemKey(selectvValue)"
              >
              </up-parse>
              <up-parse
                class="answerContent"
                :content="showExamMetasItemValue(selectvValue)"
              >
              </up-parse>
            </view>
            <view v-else class="examCard-exam-topic-subExam-select-row">
              <up-parse
                class="answerContent"
                :content="showExamMetasItemOnlyValue(selectvValue)"
              >
              </up-parse>
            </view>
            <view
              v-if="showExamMetasItemAudioSrc(selectvValue)"
              class="examCardExamAudio"
            >
              <KKAudio
                class="examCardExamAudio-audio"
                v-if="subExam.analysisSrc"
                :data="
                  loadAudioPlayData(showExamMetasItemAudioSrc(selectvValue))
                "
              />
            </view>
          </view>
        </view>

        <!-- 解析 -->
        <view v-if="data.analysis">
          <ExamHeaderSection title="文字解析" />
          <up-parse
            class="examCard-exam-topic-other-content"
            :content="data.analysis"
          ></up-parse>
          <view v-if="data.analysisSrc" class="examCardExamAudio">
            <KKAudio
              class="examCardExamAudio-audio"
              v-if="data.analysisSrc"
              :data="loadAudioPlayData(data.analysisSrc)"
            />
          </view>
        </view>

        <!-- 知识点 -->
        <view
          class="examCard-exam-topic-other"
          v-if="data.knowledgePointList && data.knowledgePointList.length > 0"
        >
          <ExamHeaderSection title="知识点" />
          <up-parse
            v-for="(knowledge, index) in data.knowledgePointList"
            :key="index"
            class="examCard-exam-topic-other-content"
            :content="knowledge"
          ></up-parse>
        </view>
        <!-- 其他标签 -->
        <view
          class="examCard-exam-topic-other"
          v-if="data.questionTagList && data.questionTagList.length > 0"
        >
          <ExamHeaderSection title="分类标签" />
          <up-parse
            v-for="(questionTag, index) in data.questionTagList"
            :key="index"
            class="examCard-exam-topic-other-content"
            :content="questionTag"
          ></up-parse>
        </view>
        <!-- 子题目答案解析 -->
        <view
          class="examCard-exam-topic-subExam"
          v-if="data.childQuestions && data.childQuestions.length > 0"
          v-for="(subExam, index) in data.childQuestions"
          :key="index"
        >
          <view class="subExamTitle">子题{{ index + 1 }}</view>
          <!-- 答案 -->
          <view class="examCard-exam-topic-subExam-answer">
            <view class="examCard-exam-topic-subExam-answer-daan">答案：</view>
            <up-parse
              class="examCard-exam-topic-subExam-answer-content"
              :content="examAnswer(subExam.answer)"
            ></up-parse>
          </view>
          <!-- 解析 -->
          <view v-if="subExam.analysis">
            <view class="analicsTitle">文字解析</view>
            <up-parse
              class="examCard-exam-topic-subExam-other-content"
              :content="subExam.analysis"
            ></up-parse>
            <view v-if="subExam.analysisSrc" class="examCardExamAudio">
              <KKAudio
                class="examCardExamAudio-audio"
                v-if="subExam.analysisSrc"
                :data="loadAudioPlayData(subExam.analysisSrc)"
              />
            </view>
          </view>
          <!-- 知识点 -->
          <view
            class="examCard-exam-topic-subExam-other"
            v-if="
              subExam.knowledgePointList &&
              subExam.knowledgePointList.length > 0
            "
          >
            <view class="analicsTitle">知识点</view>

            <up-parse
              v-for="(knowledge, index) in subExam.knowledgePointList"
              :key="index"
              class="examCard-exam-topic-subExam-other-content"
              :content="knowledge"
            ></up-parse>
          </view>
          <!-- 其他标签 -->
          <view
            class="examCard-exam-topic-subExam-other"
            v-if="subExam.questionTagList && subExam.questionTagList.length > 0"
          >
            <view class="analicsTitle">分类标签</view>

            <up-parse
              v-for="(questionTag, index) in subExam.questionTagList"
              :key="index"
              class="examCard-exam-topic-subExam-other-content"
              :content="questionTag"
            ></up-parse>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { generateUUID, isJSON } from "@/utils/util";
import { extractedAudioSrc } from "@/utils/audio";

import { KKConversationFrom } from "@/pagesA/answer/components/conversitonEnum";
import ExamHeaderSection from "./examHeaderSection.vue";
import KKAudio from "@/pagesA/components/kkAudio/index.vue";

/**
 * data数据
{
  isSourceNetwork:0,//是否来源网络
  isSourceAi:0,//是否来源AI
  stem:"" // 题干
  stemSrc: "",// 题干音频
  analysis: "",// 解析
  analysisSrc: "",// 解析音频
  answer:[],//答案
  knowledgePointList:[],// 子试题关联知识点名称
  metas:[],//选项
  ptypeTitle:"填空题",//试题类型
  ptypeValueId: "" //一级题型
  questionTagList:[]// 试题的分类标签
}
 */

const props = defineProps({
  isFromConversation: {
    type: Boolean,
    default: false,
  },
  isCanSelect: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: true,
  },
  index: {
    type: Number,
    default: 0,
  },
});

// 试题相似度
const examSimilarity = computed(() => {
  if (Number(props.data.similarity || 0) === 0) {
    return "";
  }
  let similarity = Math.round(props.data.similarity * 100);
  return `相似度：${similarity}%`;
});

// 试题来源
const examForm = computed(() => {
  if (props.data.isSourceNetwork == 1) {
    // 来源网络
    return "来源于网络";
  } else if (props.data.isSourceAi == 1) {
    // 来源AI
    return "来源于AI";
  }
  return "";
});

// 试题答案列表
const examAnswer = (currentExamAnswer) => {
  let answers = [];
  if (currentExamAnswer instanceof Array) {
    answers = currentExamAnswer;
  } else {
    if (currentExamAnswer && isJSON(currentExamAnswer)) {
      answers = JSON.parse(currentExamAnswer) || [];
    }
  }

  let answerList = [];
  answers.forEach((item) => {
    if (isJSON(item)) {
      let obj = JSON.parse(item);
      if (obj) {
        answerList.push(obj);
      }
    } else {
      answerList.push(item);
    }
  });
  let list = [];
  answerList.forEach((item) => {
    if (item instanceof Array) {
      item.forEach((detailItem) => {
        list.push(detailItem);
      });
    }
  });
  if (list.length > 0) {
    return list.join(" ");
  }
  return answerList.join(" ");
};
// 试题metas
const examMetas = (currentExamMetas: any) => {
  let metas = [];
  if (currentExamMetas instanceof Array) {
    metas = currentExamMetas;
  } else {
    if (currentExamMetas && isJSON(currentExamMetas)) {
      metas = JSON.parse(currentExamMetas) || [];
    }
  }

  let metaList = [];
  metas.forEach((item) => {
    if (isJSON(item)) {
      let obj = JSON.parse(item);
      if (obj) {
        metaList.push(obj);
      }
    } else {
      metaList.push(item);
    }
  });
  let list = [];
  metaList.forEach((item) => {
    if (item instanceof Array) {
      item.forEach((detailItem) => {
        list.push(detailItem);
      });
    } else {
      list.push(item);
    }
  });
  return list || metaList;
};

const showExamMetasItemKey = (item: any) => {
  return item.key ? `${item.key}:` : "";
};

const showExamMetasItemValue = (item: any) => {
  const obj = extractedAudioSrc(item.value || "");
  if (obj) {
    return obj.text || "";
  }
  return item.value || "";
};

const showExamMetasItemOnlyValue = (item: any) => {
  const obj = extractedAudioSrc(item || "");
  if (obj) {
    return obj.text || "";
  }
  return item.value || "";
};

const showExamMetasItemAudioSrc = (item: any) => {
  const obj = extractedAudioSrc(item.value || "");
  if (obj && obj.src) {
    return obj.src || "";
  }
  return "";
};

const loadAudioPlayData = (src: string) => {
  const aduioObj = {
    id: generateUUID(),
    from: KKConversationFrom.me,
    text: src,
    duration: 0,
  };
  return aduioObj;
};

const subExamStemInfo = (index, stem) => {
  if (stem && stem.startsWith("<p>")) {
    let handleStem = stem.replace(/^<p>|<p>$/g, "");
    return `<p><span style='font-size:32rpx;'>${index}、</span>${handleStem}</p>`;
  } else {
    if (stem) {
      return `${index}、${stem || ""}`;
    }
    return "";
  }
};

const examSelectAction = () => {
  emit("examSelectAction", props.index);
};
const emit = defineEmits(["examSelectAction"]);
</script>

<style lang="scss" scoped>
.examCard {
  background: #f7faff;
  border-radius: 12rpx;

  &-top {
    height: 80rpx;
    background: #d5e5ff;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    &-select {
      margin-left: 24rpx;
      width: 44rpx;
      height: 44rpx;
    }
    &-leftTitle {
      padding-left: 12rpx;
    }
    &-rigthTitle {
      margin-left: auto;
      padding-right: 24rpx;
    }
  }

  &-normalTop {
    height: 66rpx;
    border: 1rpx solid #f0f0f0;
    border-radius: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    &-title {
      padding-left: 24rpx;
      font-size: 30rpx;
      color: #111111;
      line-height: 32rpx;
    }
    &-subTitle {
      margin-left: auto;
      padding-right: 24rpx;
      font-size: 30rpx;
      color: #999999;
      line-height: 32rpx;
    }
  }
  &-normalTopConversation {
    border-radius: 32rpx 8rpx 0rpx 0rpx;
  }
  &-exam {
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: 28rpx;
    &-topic {
      font-size: 32rpx;
      color: #333333;
      line-height: 48rpx;
      &-content {
        padding-top: 8rpx;
      }
      &-select {
        display: flex;
        flex-direction: column;
        margin-top: 24rpx;
        &-row {
          display: flex;
          flex-direction: row;
          .answerSelect {
            width: 50rpx;
          }
          .answerContent {
            width: calc(100% - 50rpx);
          }
        }
      }
      &-answer {
        margin-top: 48rpx;
        // height: 42rpx;
        font-size: 32rpx;
        color: #126efe;
        line-height: 48rpx;
        display: flex;
        flex-direction: row;
        &-daan {
          width: 100rpx;
        }
        &-content {
          width: calc(100% - 100rpx);
        }
      }
      &-other {
        &-content {
          font-size: 32rpx;
          color: #333333;
          line-height: 48rpx;
        }
      }
      &-subExam {
        margin-top: 16rpx;
        .subExamTitle {
          font-weight: 500;
          font-size: 30rpx;
          color: #111111;
          line-height: 34rpx;
        }
        .subExamStem {
          font-size: 30rpx;
          color: #111111;
          line-height: 32rpx;
        }
        .analicsTitle {
          font-weight: 400;
          font-size: 28rpx;
          color: #111111;
          line-height: 32rpx;
          padding-top: 16rpx;
        }
        &-select {
          display: flex;
          flex-direction: column;
          margin-top: 24rpx;
          &-row {
            display: flex;
            flex-direction: row;
            .answerSelect {
              width: 50rpx;
            }
            .answerContent {
              width: calc(100% - 50rpx);
            }
          }
        }
        &-answer {
          margin-top: 16rpx;
          font-size: 32rpx;
          color: #126efe;
          line-height: 48rpx;
          display: flex;
          flex-direction: row;
          &-daan {
            width: 100rpx;
          }
          &-content {
            width: calc(100% - 100rpx);
          }
        }
        &-other {
          &-content {
            font-size: 32rpx;
            color: #333333;
            line-height: 48rpx;
          }
        }
      }
    }
  }
}

.examCardCoverstion {
  border-radius: 32rpx 8rpx 32rpx 32rpx;
}

.examCardExamAudio {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  width: 478rpx;
  height: 84rpx;
  border-radius: 38rpx 8rpx 38rpx 38rpx;
  background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);
  display: flex;
  flex-direction: row;
  align-items: center;

  &-audio {
    width: calc(100% - 48rpx);
    margin-left: 24rpx;
    margin-right: 24rpx;
  }
}
</style>
